<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="500px" nzTitle="用户"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">
  <form nz-row nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="username"> 名称</nz-form-label>
      <nz-form-control nzErrorTip="Please input your password!">
        <input nzSize="small" nz-input id="username" formControlName="username"/>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="sex"> 性别</nz-form-label>
      <nz-form-control>
        <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="Select a sex" formControlName="sex" id="sex">
          <nz-option nzLabel="男" [nzValue]=1></nz-option>
          <nz-option nzLabel="女" [nzValue]=2></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="roleIds"> 角色</nz-form-label>
      <nz-form-control>
        <nz-select nzSize="small"
          [nzMaxTagCount]="3"
          [nzMaxTagPlaceholder]="tagPlaceHolder"
          formControlName="roleIds"
          id="roleIds"
          nzMode="multiple"
          nzPlaceHolder="Please select"
        >
          <nz-option *ngFor="let item of allRoleList" [nzLabel]="item.roleName" [nzValue]="item.id"></nz-option>
        </nz-select>
        <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected</ng-template>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="age"> 年龄</nz-form-label>
      <nz-form-control nzErrorTip="Please input your age!">
        <nz-input-number nzSize="small" nzInputMode="age" id="age" formControlName="age"></nz-input-number>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="nickname"> 昵称</nz-form-label>
      <nz-form-control
        [nzValidateStatus]="validateForm.controls['nickname']"
        nzErrorTip="Please input your phone url!"
      >
        <input nzSize="small" nz-input id="nickname" formControlName="nickname"/>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="phoneNum"> 电话</nz-form-label>
      <nz-form-control
        [nzValidateStatus]="validateForm.controls['phoneNum']"
        nzErrorTip="Please input your phone url!"
      >
        <input nzSize="small" nz-input id="phoneNum" formControlName="phoneNum"/>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="email"> 邮箱</nz-form-label>
      <nz-form-control
        [nzValidateStatus]="validateForm.controls['email']"
        nzErrorTip="Please input your phone url!"
      >
        <input nzSize="small" nz-input id="email" formControlName="email"/>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="24">
      <nz-form-label nzFor="memo"> 简介</nz-form-label>
      <nz-form-control
        [nzValidateStatus]="validateForm.controls['memo']"
        nzErrorTip="Please input your phone url!"
      >
        <textarea nzSize="small" formControlName="memo" id="memo" nz-input rows="2" placeholder="write any thing"></textarea>
      </nz-form-control>
    </nz-form-item>

  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">保存</button>
    </div>
  </ng-template>

</nz-drawer>
